<template>
  <div class="container">
    <baleTable :tableData="tableData" :tableHead="tableHead1" :isSearch="true" :isTableRowClick="true"
      :tableLoading="tableLoading" :page="page" @pageSizeChange="pageSizeChange"
      @handleCurrentChange="handleCurrentChange" @searchMethods="searchMethods" @tableSortChange="tableSortChange"
      @handleRowClick="handleRowClick" ref="baleTable">
      <template #totalDetail="{ scope }">
        <div @click.stop="">
          <el-popover placement="top-start" width="200" trigger="hover">
            <div v-for="(item, index) in scope.row.price_detailCopy" :key="index">
              {{ item.name }}:{{ item.value }}
            </div>
            <el-button size="small" type="primary" slot="reference">价格详情</el-button>
          </el-popover>
        </div>
      </template>
      <template #status="{ scope }">
        <el-tag :type="formatterStatus(scope.row.status).type">
          {{ formatterStatus(scope.row.status).name }}</el-tag>
      </template>
      <template #category_id="{ scope }">
        {{ formatterCategory_id(scope.row.category_id) }}
      </template>
      <template #finish_time="{ scope }">
        {{ scope.row.finish_time?scope.row.finish_time:scope.row.cancel_time }}
      </template>

      <!--  <template #caozuo="{ scope }">
        <el-button
          v-if="tableType == '1'"
          type="primary"
          size="small"
          @click.stop="orderOperation('0', scope.row)"
          >订单审核</el-button
        >
        <el-button
          v-if="tableType == '2'"
          type="danger"
          size="small"
          @click.stop="orderOperation('1', scope.row)"
          >订单分配</el-button
        >
      </template> -->
      <template #headLeft>
        <!--  <div
          :class="[
            'tableStats-btn',
            'mr10',
            { 'tableStats-btn-active': tableType == '0' },
          ]"
          @click="handleSelectTableType('0')"
        >
          订单列表
        </div> -->
        <!--  <tableHeadSelect :selectList="headSelectList" @headSelectChange="headSelectChange" /> -->
      </template>
    </baleTable>
    <!--   <orderReviewHandle
      ref="orderReview"
      @refresh="handleSelectTableType('1')"
    />
    <orderAllocation
      ref="orderAllocation"
      @refresh="handleSelectTableType('2')"
    /> -->
    <orderDetail ref="orderDetail" @refresh="handleSelectTableType(tableType)"></orderDetail>
  </div>
</template>

<script>
import { tableHeadOrderList } from "./config";
import {
  ApiGetOrderList,
  ApiGetOrderReviewList,
  ApiGetOrderAllocationList,
} from "@a/index";
/* import orderReviewHandle from "./component/orderReviewHandle.vue";
import orderAllocation from "./component/orderAllocation.vue"; */
import orderDetail from "./component/detail.vue";
import tableHeadSelect from "@/components/tableHeadSelect.vue";

export default {
  components: {
    /*    orderReviewHandle,
    orderAllocation, */
    orderDetail,
    tableHeadSelect,
  },
  data() {
    return {
      tableType: "0",
      tableHeadOrderList,
      tableHead1: [],
      formInline: {},
      page: {
        page: 1,
        size: 25,
        total: 0,
      },
      searchParams: {},
      sortParams: {},
      tableLoading: false,
      tableData: [],
      cateList: [],
      statusFormatter: [
        {
          name: "待支付",
          code: "1",
          type: "danger",
        },
        {
          name: "待接单",
          code: "2",
          type: "",
        },
        {
          name: "已接单",
          code: "3",
          type: "warning",
        },
        {
          name: "已出发",
          code: "4",
          type: "warning",
        },
        {
          name: "已上门",
          code: "5",
          type: "warning",
        },
        {
          name: "已完成",
          code: "6",
          type: "success",
        },
        {
          name: "已取消",
          code: "7",
          type: "danger",
        },
        {
          name: "退款中",
          code: "8",
          type: "danger",
        },
      ],

      headSelectList: [
        {
          label: "全部",
        },
        /*  {
          label: "待审核",
          count: "",
        }, */
        {
          label: "待分配",
          count: "",
        },
      ],
    };
  },
  mounted() {
    this.getOptions("0");
    this.getTableData();
    this.getData();
  },

  methods: {
    //切换下拉框
    headSelectChange(data) {
      if (data.label == "待审核") {
        this.tableType = "1";
        this.getTableDataReviewList();
      } else if (data.label == "待分配") {
        this.tableType = "2";
        this.getTableAllocationList();
      } else {
        this.tableType = "0";
        this.getTableData();
      }
    },
    getData() {
      const index1 = this.tableHeadOrderList.findIndex(
        (item) => item.prop === "status"
      );
      if (index1 >= 0) {
        this.tableHeadOrderList[index1].searchOptions = this.statusFormatter;
      }
    },
    formatterStatus(val) {
      let data = this.statusFormatter.find((item) => {
        if (item.code == val) {
          return item;
        }
      });
      if (data) {
        return data;
      } else {
        return val;
      }
    },
    handleSelectTableType(val) {
      this.tableType = val;
      //移除操作
      this.getOptions(val);
      this.page.page = 1;
      this.searchParams = {};
      this.resetTableType();
      //审核列表
      /*   if (val == "0") {
        this.getTableData();
      } else if (val == "1") {
        this.getTableDataReviewList();
      } else if (val == "2") {
        this.getTableAllocationList();
      } */
    },

    getOptions(val) {
      /*    let tableHeadCopy = this.deepClone(this.tableHead);
      console.log(tableHeadCopy); */
      /*   const index = this.tableHead.findIndex((item) => item.prop === "caozuo"); */
      if (val == 0) {
        this.tableHead1 = this.tableHeadOrderList;
      }
    },

    //0订单审核   1订单分配
    /*   orderOperation(val, row) {
      if (val == 0) {
        this.$refs.orderReview.show(row);
      } else {
        this.$refs.orderAllocation.show(row);
      }
    },
 */
    //订单列表
    getTableData(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
        type: "pay",
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;
          this.tableLoading = false;
          this.headSelectList[1].count = res.allocation;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    //审核列表
    getTableDataReviewList(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderReviewList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;

          this.headSelectList[1].count = res.allocation;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    //
    //分配列表
    getTableAllocationList(params = {}) {
      let postParams = {
        ...this.formInline,
        ...this.sortParams,
        ...this.page,
        ...params,
        ...this.searchParams,
      };
      this.tableLoading = true;
      this.tableData = [];
      ApiGetOrderAllocationList(postParams)
        .then((res) => {
          let { data, page } = res;
          this.tableData = data;
          this.page.total = page.total;

          this.headSelectList[1].count = res.allocation;
          this.tableLoading = false;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    searchMethods(params) {
      console.log("111");
      this.searchParams = {};
      this.page.page = 1;
      //重置当前订单数据
      this.searchParams = params;
      this.resetTableType();
    },
    pageSizeChange(val) {
      this.page.size = val;
      this.resetTableType();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.resetTableType();
    },
    tableSortChange(params) {
      if (params.sort_str) {
        this.sortParams = { ...this.sortParams, ...params };
      } else {
        delete this.sortParams.sort_str;
        delete this.sortParams.sort_order;
      }
      this.page.page = 1;
      this.resetTableType();
    },
    resetTableType() {
      console.log("111", this.tableType);
      if (this.tableType == "0") {
        this.getTableData();
      } else if (this.tableType == "1") {
        this.getTableDataReviewList();
      } else if (this.tableType == "2") {
        this.getTableAllocationList();
      }
    },
    //订单详情列表查看
    handleRowClick(row) {
      this.$refs.orderDetail.show(row.row);
    },
  },
};
</script>
<style></style>
